<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染指令</title>
</head>
<body>
  <!--
    1.v-for 列表循环指令 user in list user list数组 user里面的属性形参可以用user.xx 插值表达式表示
    2.v-for中的索引语法为：(item,index)in items 当中item和index都是形参 可以根据需要重新命名 (user,i)in userlist
  -->
  <div id="app">
    <input  type="text" v-model="name">
    <button @click="addNewUser">添加</button>
    <ul>
      <li v-for="user in list" :key="user.id"> 
        <input type="checkbox" >
        姓名：{{user.name}}
      </li>
    </ul>
  </div>
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm= new Vue({
      el:'#app',
      data:{
        // list 是一个数组
        list:[
          {id:1,name:'zs'},
          {id:2,name:'ls'}
        ],
        name:'',
        nextId:3
      },
      methods: {
        addNewUser(){
          this.list.unshift({id:this.nextId,name:this.name})
          this.name='',
          this.nextId++
        }
      },
    })
  </script>
</body>
</html>